<template>
  <div><div
        class="ud-app-loader ud-component--header-v6--header udlite-header"
        data-module-id="common/udlite/desktop"
        data-module-args='{"isInstructorSignupEnabled":false,"isLoggedIn":false,"tryUFBPlacements":{"bar":"ufb_header","profile":"account-menu","mobile":"ufb_header"},"mobileAppLink":{"url":"/mobile/"},"searchPhrase":null}'
        data-module-priority="-10"
      >
        <div data-unique-id="339" style="display: none"></div>

        <div
          class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv"
          data-purpose="header"
        >
          <div class="skip-to-content-button--skip-to-content--1MoIi">
            <button
              type="button"
              class="udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md skip-to-content-button--skip-to-content-btn--3Uakj"
            >
              <span
                aria-hidden="true"
                class="skip-to-content-button--skip-to-content-shadow--eBW6V"
              ></span
              ><span style="margin: 0">跳转至目录</span>
            </button>
          </div>
          <a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod"
            ><img
              src="../assets/static/picture/logo-coral.svg"
              alt="Udemy"
              width="110"
              height="32"
          /></a>
          <nav
            class="header--gap-button--3bIww popper--popper--19faV popper--popper-hover--4YJ5J"
          >
            <span class="udlite-text-sm header--dropdown-button-text--2jtIM"
              >类别</span
            >
          </nav>

          <div
            class="udlite-search-form-autocomplete header--search-bar--1_mS0 udlite-form-group"
          >
            <label
              class="udlite-sr-only udlite-form-label udlite-heading-sm"
              for="u339-search-form-autocomplete--3"
              >搜索任何内容</label
            >

            <input
              placeholder="搜索任何内容"
              name="q"
              autoComplete="off"
              value=""
              id="u339-search-form-autocomplete--3"
              class="udlite-text-input udlite-text-input-small udlite-text-sm udlite-search-form-autocomplete-input js-header-search-field"
            />
          </div>


          <div class="A">
            <div v-if="username">欢迎您：{{username}}</div>
            <div v-else><router-link to="/mylogin_two">登录</router-link>/<router-link to="/myreg">注册</router-link></div>
          </div>

          <div class="B">
            <van-button v-if="username" style='background-color:#55C353;color:white' @click="logout">注销</van-button>
          </div>

          <div class="C">
            <router-link to="/alter" v-if="username">>>去修改密码</router-link>
          </div>

          <div class="D" v-if="headfile">
            <van-cell-group>
              <van-image round width="6rem" height="6rem" :src="'http://localhost:8000/static/upload/' + this.headfile" />
            </van-cell-group>
          </div>

          <div class="E">
            <router-link to="/myhome" v-if="username">个人主页</router-link>
          </div>


          
          <div style="flex: 1"></div>
        </div>
      </div></div>
</template>

<script>

export default{
  data() {
    return {
      username:'',
      token:localStorage.getItem('token'),
      headfile:localStorage.getItem('filesname'),
      src:'http://localhost:8000/static/upload/' + this.headfile
    }
  },

  mounted:function(){
    // 判断是否登录

    var uname = localStorage.getItem('username')
    if (uname == null){
      this.username == ''
    }else{
      this.username = uname
    }

  },

  methods:{
    logout(){
      localStorage.removeItem('username')
      localStorage.removeItem('token')
      localStorage.removeItem('filesname')
      localStorage.removeItem('uid')
      this.$router.push({path:'/mylogin_two'})
    }
  }
}
</script>

<style type="text/css">
 
.A{
  position: absolute;
  right: 200px;
  top: 28px;
}

.B{
  position: absolute;
  right: 120px;
  top: 15px;
}

.C{
  position: absolute;
  right: 25px;
  top: 28px;
}

.D{
  position: absolute;
  right: 330px;
  top: 6px;
}

</style>
